<script setup>
import CommonAside from '@/components/CommonAside.vue';
import CommonHeader from '@/components/CommonHeader.vue';
import CommonTab from '@/components/CommonTab.vue'

</script>

<template>
    <div class="common-layout">
        <el-container class="lay-container">
            <common-aside />
            <el-container>
                <!-- <el-affix> -->
                <el-header>
                    <common-header />
                </el-header>
                <!-- </el-affix> -->
                <!-- <common-tab /> -->
                <el-main class="right-main" >
                    <div class="main-router">
                        <router-view></router-view>
                    </div>

                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<style scoped lang="less">

    .common-layout,.lay-container{
        height: 100%;
    }
    .el-header{
        z-index: 10;
        width: 100%;
        position: fixed;
        background-color: #333;
    }
    .right-main{
            padding: 0;
            height: calc(100% - 60px);
            overflow: auto;
    // height: 90%;
    /* 设置主区域高度 */
    overflow-y: auto;
    /* 隐藏主区域的滚动条 */

    }
    // .main-router{
    //     overflow: hidden;
    //     width: 100%;
    //     height: 100%;
    // }
    // .commin-aside{
    //     position: fixed;
    //         /* 固定侧边栏 */
    //         top: 0;
    //         bottom: 0;
    //         left: 0;
    //         z-index: 10;
    //         /* 确保在其他元素之上 */
    // }
</style>